{% extends "shop/base.html" %}  <!-- 继承自 "shop/base.html" 模板，用于复用基础页面结构 -->

{% block title %}  <!-- 定义标题块 -->
    Checkout  <!-- 设置页面标题为 "Checkout" -->
{% endblock %}

{% block content %}  <!-- 定义内容块 -->
    <h1>Checkout</h1>  <!-- 显示大标题 "Checkout" -->
    
    <div class="order-info">  <!-- 订单信息容器 -->
        <h3>Your order</h3>  <!-- 显示小标题 "Your order" -->
        <ul>  <!-- 订单商品列表 -->
            {% for item in cart %}  <!-- 遍历购物车中的每个商品 -->
                <li>{{ item.quantity }}x {{ item.product.name }} <span>${{ item.total_price }}</span></li>  <!-- 显示商品数量、名称和总价 -->
            {% endfor %}  <!-- 结束遍历 -->
        </ul>
        <p>Total: ${{ cart.get_total_price }}</p>  <!-- 显示订单总价 -->
    </div>
    
    <form action="." method="post" class="order-form">  <!-- 提交订单的表单，action为当前页面，方法为POST -->
        {{ form.as_p }}  <!-- 渲染表单字段为段落形式 -->
        <p><input type="submit" value="Place order"></p>  <!-- 提交按钮，按钮文本为 "Place order" -->
        {% csrf_token %}  <!-- CSRF令牌，用于防止跨站请求伪造 -->
    </form>
{% endblock %}  <!-- 结束内容块 -->
